<template>
  <div class="box">
    <div class="area-center">
      <!-- 客服区域 -->
      <Head title="客 服" id="back"></Head>
      <div class="top">
        <div class="today richText title_word bold-100" v-html="list"></div>
      </div>
      <!-- 有奖留言区域 -->
      <div class="bottom">
        <div class="title_word text">有奖留言</div>
        <!-- 1.有奖投诉留言区域 -->
        <div class="small title-center">
          <div class="one">1.投诉留言</div>
          <van-field
            v-model="messageone"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="投诉留言"
            show-word-limit
          />
          <div style="margin: 10px">
            <van-button round block type="info" @click="submitone"
              >提 交</van-button
            >
          </div>
        </div>
        <!-- 2.有奖建议留言区域 -->
        <div class="small title-center">
          <div class="one bold-100">2.宝贵建议</div>
          <van-field
            v-model="messagetwo"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="宝贵建议"
            show-word-limit
          />
          <div style="margin: 10px">
            <van-button round block type="info" @click="submittwo"
              >提 交</van-button
            >
          </div>
        </div>
        <!-- 3.有奖侵权留言区域 -->
        <div class="small title-center">
          <div class="one">3.侵权举报</div>
          <van-field
            v-model="messagethree"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="侵权举报"
            show-word-limit
          />
          <div style="margin: 10px">
            <van-button round block type="info" @click="submitthree"
              >提 交</van-button
            >
          </div>
        </div>
        <!-- 4.其他事务留言区域 -->
        <div class="small title-center">
          <div class="one">4.其他留言</div>
          <van-field
            v-model="messagefour"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="其他留言"
            show-word-limit
          />
          <div style="margin: 10px">
            <van-button round block type="info" @click="submitfour"
              >提 交</van-button
            >
          </div>
        </div>
        <!-- 5.各项问题解答区域 -->
        <div class="small title-center">
          <div class="one">5.上述问题解答</div>
          <van-field
            v-model="messagefive"
            rows="2"
            autosize
            type="textarea"
            maxlength="150"
            placeholder="上述问题解答"
            show-word-limit
          />
          <div style="margin: 10px">
            <van-button round block type="info" @click="submitfive"
              >提 交</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { Toast } from "vant";
import { service, findById } from "@/api/index";
import Head from "@/components/public/HeadPage.vue";
export default {
  data() {
    return {
      messageone: "",
      messagetwo: "",
      messagethree: "",
      messagefour: "",
      messagefive: "",
      list: "",
      userName: sessionStorage.getItem("userName"),
      userId: sessionStorage.getItem("userId"),
      userTel: sessionStorage.getItem("userTel"),
      province: sessionStorage.getItem("provincesub"),
    };
  },
  methods: {
    //1.投诉留言
    submitone() {
      if (this.messageone != "") {
        let serviceType = "投诉留言";
        service(
          this.userName,
          this.userId,
          serviceType,
          this.messageone,
          this.userTel,
          this.province
        ).then(() => {
          // console.log(res);
          this.messageone = "";
          Toast.success("留言成功");
        });
      }
    },
    //2.宝贵建议
    submittwo() {
      if (this.messagetwo != "") {
        let serviceType = "宝贵建议";
        service(
          this.userName,
          this.userId,
          serviceType,
          this.messagetwo,
          this.userTel,
          this.province
        ).then(() => {
          // console.log(res);
          this.messagetwo = "";
          Toast.success("留言成功");
        });
      }
    },
    //3.侵权举报
    submitthree() {
      if (this.messagethree != "") {
        let serviceType = "侵权举报";
        service(
          this.userName,
          this.userId,
          serviceType,
          this.messagethree,
          this.userTel,
          this.province
        ).then(() => {
          // console.log(res);
          this.messagethree = "";
          Toast.success("留言成功");
        });
      }
    },
    //4.其他事务留言
    submitfour() {
      if (this.messagetfour != "") {
        let serviceType = "其他留言";
        service(
          this.userName,
          this.userId,
          serviceType,
          this.messagefour,
          this.userTel,
          this.province
        ).then(() => {
          // console.log(res);
          this.messagefour = "";
          Toast.success("留言成功");
        });
      }
    },
    //5.上述问题解答
    submitfive() {
      if (this.messagetfive != "") {
        let serviceType = "上述问题解答";
        service(
          this.userName,
          this.userId,
          serviceType,
          this.messagefive,
          this.userTel,
          this.province
        ).then(() => {
          // console.log(res);
          this.messagefive = "";
          Toast.success("留言成功");
        });
      }
    },
  },
  mounted() {
    findById({ otherId: "kefu" }).then((res) => {
      if (res.data.code == 200) {
        this.list = this.dataHTML(res.data.data.context);
      }
    });
  },
  components: {
    Head,
  },
};
</script>
  
  <style scoped>
/* 整体区域 */
.box {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 客服区域 */
.top {
  width: 100%;
}
.text {
  height: 0.3rem;
  margin-top: 0.26rem;
  line-height: 0.3rem;
  border-bottom: 2px solid #dad9df;
}

.today {
  line-height: 0.27rem;
  text-indent: 0.05rem;
  margin-top: 0.05rem;
}
/* 有奖留言区域 */
.bottom {
  width: 100%;
  margin-top: 0.05rem;
}

/* 小盒子区域 */
.small {
  width: 100%;
  height: 1.55rem;
  margin-top: 0.1rem;
}
.one {
  height: 0.3rem;

}
/* 提交的整体区域 */
.van-button--block {
  width: 30%;
  height: 50%;
  float: right;
  line-height: 0.2rem;
  background-color: #30569f;
}
.van-button__text {
  font-size: 0.18rem;
}
.van-cell {
  border-radius: 0.1rem;
}
.van-field {
  background-color: #f0eff5;
}
</style>